<template>
  <div class="home">
    <Topbar :profileEnabled="true">
      <span slot="logo" class="Topbar-logo" @click="reload">ele.me</span>
    </Topbar>
    <div class="city-location">
      <div class="city-label">
        <span>当前定位的城市：</span>
        <span>定位不准时，请在城市列表中选择</span>
      </div>
      <router-link class="city-now" :to="'/city/' + nowCityId">
        <span>{{nowCity}}</span>
        <svg class="arrow">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
        </svg>
      </router-link>
    </div>
    <div class="citys-hot">
      <h4>热门城市</h4>
      <ul class="city-wrapper clear">
        <router-link tag="li" v-for="city in hotCitys" :to="'/city/' + city.id" :key="city.id">{{city.name}}</router-link>
      </ul>
    </div>
    <div class="citys-all">
      <ul class="citys-group-wrapper">
        <li class="citys-group" v-for="(citysGroup, index) in allCitys" :key="citysGroup.letter">
          <h4 class="city-letter">
            {{citysGroup.letter}}
            <span v-if="index == 0">（按字母排序）</span>
          </h4>
          <ul class="city-wrapper clear">
            <router-link
              tag="li"
              class="ellipsis"
              v-for="city in citysGroup.citys"
              :key="city.id"
              :to="'/city/' + city.id"
            >{{city.name}}</router-link>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Topbar from '../../components/Topbar';
import { getDefaultCity, getHotCitys, getAllCitys } from '../../etc/datas';
export default {
  data() {
    return {
      nowCity: '默认城市', //当前城市名称
      nowCityId: '默认城市Id', //当前城市id
      hotCitys: [], //热门城市列表
      allCitys: [] //所以城市列表
    };
  },
  mounted() {
    getDefaultCity(data => {
      this.nowCity = data.name;
      this.nowCityId = data.id;
    });
    getHotCitys(data => (this.hotCitys = data));
    getAllCitys(data => {
      let allCitys = (this.allCitys = []);
      for (let i = 65; i <= 90; i++) {
        //根据字母顺序进行排序，并转化为数组格式
        let letter = String.fromCharCode(i),
          citys = data[letter];
        if (citys) {
          allCitys.push({
            letter,
            citys
          });
        }
      }
    });
  },
  methods: {
    reload() {
      window.location.reload();
    }
  },
  components: {
    Topbar
  }
};
</script>

<style lang="scss">
@import '../../styles/mixin';
.home {
  .city-location {
    border-top: 1px solid $bc;
    background-color: #fff;
    margin-bottom: 0.4rem;
  }
  .city-label {
    @include fj;
    line-height: 1.45rem;
    padding: 0 0.45rem;
    span:nth-of-type(1) {
      @include sc(0.55rem, #666);
    }
    span:nth-of-type(2) {
      font-weight: 900;
      @include sc(0.475rem, #9f9f9f);
    }
  }
  .city-now {
    @include fj;
    align-items: center;
    height: 1.8rem;
    padding: 0 0.45rem;
    border-top: 1px solid $bc;
    border-bottom: 2px solid $bc;
    @include font(0.75rem, 1.8rem);
    span:nth-of-type(1) {
      color: $blue;
    }
    .arrow {
      @include wh(0.6rem, 0.6rem);
      fill: #999;
    }
  }
  .citys-hot {
    background-color: #fff;
    margin-bottom: 0.4rem;
    h4 {
      color: #666;
      font-weight: 400;
      text-indent: 0.45rem;
      border-top: 2px solid $bc;
      border-bottom: 1px solid $bc;
      @include font(0.55rem, 1.45rem, 'Helvetica Neue');
      span {
        @include sc(0.475rem, #999);
      }
    }
  }
  .city-wrapper {
    li {
      float: left;
      text-align: center;
      color: $blue;
      border-bottom: 0.025rem solid $bc;
      border-right: 0.025rem solid $bc;
      @include wh(25%, 1.75rem);
      @include font(0.6rem, 1.75rem);
    }
    li:nth-of-type(4n) {
      border-right: none;
    }
  }
  .citys-group {
    margin-bottom: 0.4rem;
    background-color: #fff;
    border-bottom: 1px solid $bc;
    .city-letter {
      color: #666;
      font-weight: 400;
      text-indent: 0.45rem;
      border-top: 2px solid $bc;
      border-bottom: 1px solid $bc;
      @include font(0.55rem, 1.45rem, 'Helvetica Neue');
      span {
        @include sc(0.475rem, #999);
      }
    }
    li {
      color: #666;
    }
  }
}

.Topbar-logo {
  left: 0.4rem;
  font-weight: 400;
  @include sc(0.7rem, #fff);
  @include wh(2.3rem, 0.7rem);
  @include ct;
}
</style>